2005年11月01日
▲→川俣晶の縁側→ソフトウェア→技術雑記 total 4146 count

ブラウザ間非互換性: Netscape 7.02でclientWidth/clientHeightが動作しないケースがある

Written By: 川俣 晶連絡先

　また遭遇。

　ブラウザ間の動作非互換性です。

　Netscape 7.02でclientWidth/clientHeightが動作しないケースがあります。

検証プログラム §

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>test</title>

<script><!--

function onLoad()

{

    var h1 = document.getElementById('t1').clientHeight;

    var h2 = document.getElementById('t2').clientHeight;

    var h3 = document.getElementById('t3').clientHeight;

    var hbody = document.body.clientHeight;

    document.write("<p>" + h1 + "</p>");

    document.write("<p>" + h2 + "</p>");

    document.write("<p>" + h3 + "</p>");

    document.write("<p>" + hbody + "</p>");

}

// --></script>

</head>

<body onload="onLoad()" id="t1">

<div id="t2"><p id="t3">test</p></div>

</body>

</html>

　通常、これを開くと、4つのゼロではない数字が表示されます。(Internet Explorer 6.0, Firefox 1.0.7, Opera 8.5, Netscape 8.0.4[Gecko/IE]で確認)

　しかし、Netscape 7.02で開くと、2番目と3番目の数字がゼロになります。

　どうも、body以外の要素について、clientWidth/clientHeightが機能していないような印象があります。

　ちなみに、この2つはマイクロソフトがInternet Explorerに実装した機能で、W3CのDOMにはないものです。

対策 §

　offsetWidth/offsetHeightに置き換えてみる……。しかし、これを行うと要素の縁の部分のサイズも含めたサイズが取得されてしまうので、完全互換ではありません。

　何か良い方法はないものかな?